{extend name="public/layout"}
{block name="head"}
<style>
    .swipe {
        overflow: hidden;
        visibility: hidden;
        position: relative;
    }

    .swipe-wrap {
        overflow: hidden;
        position: relative;
    }

    .swipe-wrap > div {
        height: 3.744rem;
        float: left;
        width: 100%;
        position: relative;
        background-size: cover;
        overflow: hidden;
        background-position: center center;
    }

    #pointer {
        position: absolute;
        right: 0;
        left: 0;
        text-align: center;
        bottom: 0.3rem;
        overflow: hidden;
    }

    #pointer li {
        display: inline-block;
        list-style: none;
    }

    #pointer li a {
        display: inline-block;
        width: 0.1248rem;
        height: 0.1248rem;;
        background: #b6b6b6;
        border-radius: 50%;
        /*border: 1px solid #fff;*/
        margin-right: 0.05rem;
        margin-left: 0.05rem;
    }

    #pointer li a.active {
        background: #fff;
    }
    .m-toolbar{
        padding:0.3456rem 0 0.28800000000000003rem 0;
        text-align: center;
    }
    .m-toolbar a{
        display: inline-block;
    }
    .m-toolbar img{
        height:0.4224rem;
    }
    .m-toolbar label{
        display: block;
        text-align: center;
        font-size:0.2496rem;
    }
    .img-item{
        height:2.4576000000000002rem;
        background-size: cover;
        background-position: center center;
        position: relative;
        display: block;
    }
    .img-title{
        text-align: center;
        color:#fff;
        position: absolute;
        bottom:0;
        padding:5px;
        left:0;
        right:0;
        background-color: rgba(0,0,0,0.4);
    }
    .swipe-wrap a{
        display: block;
        width: 100%;
        height: 100%;
    }
</style>
{/block}
{block name="content"}
<div id="slider" class="swipe">
    <div class="swipe-wrap">
        {volist name="banners" id="vo"}
        <div style="background-image:url('{$vo.img_src}')">
            {notempty name="vo.link_addr"}
            <a href="{$vo.link_addr}"></a>
            {/notempty}
        </div>
        {/volist}
    </div>
    <ul id="pointer">
        {volist name="banners" id="vo"}
        <li><a{$key==0?' class="active"':''}></a></li>
        {/volist}
    </ul>
</div>
<div class="m-toolbar bg-white">
    <div class="flex">
        <div class="flex-con">
            <a href="{:U('donation/home')}">
                <img src="/images/icons/donation.png" alt="">
                <label>捐赠</label>
            </a>
        </div>
        <div class="flex-con">
            <a href="{:U('activity/index')}">
                <img src="/images/icons/activity.png" alt="">
                <label>活动</label>
            </a>
        </div>
        <div class="flex-con">
            <a href="{:U('coral/home')}">
                <img src="/images/icons/coral.png" alt="">
                <label>珊瑚</label>
            </a>
        </div>
        <div class="flex-con">
            <a href="{:U('album/index')}">
                <img src="/images/icons/picture.png" alt="">
                <label>相册</label>
            </a>
        </div>
        <div class="flex-con">
            <a href="{:U('video/index')}">
                <img src="/images/icons/video.png" alt="">
                <label>视频</label>
            </a>
        </div>
        <div class="flex-con">
            <a href="{:U('index/mine')}">
                <img src="/images/icons/mine.png" alt="">
                <label>我的</label>
            </a>
        </div>
    </div>
</div>
<div class="mt bg-white plr pb">
    <div class="h1 text-center text-default pt pbs rel border-b">
        <div class="line-cross">
            <div class="line-cross-inner">
                资讯动态
            </div>
        </div>
        <div class="abs-right">
            <a href="{:U('Article/index')}" class="text-primary h2">更多&gt;&gt;</a>
        </div>
    </div>
    <div class="img-list">
        {volist name="articles" id="vo"}
        <a class="img-item mt" href="{:U('article/detail',['id'=>$vo.id])}" style="background-image: url('{$vo.img_src}')">
            <div class="img-title h2">
                {$vo.title}
            </div>
        </a>
        {/volist}
    </div>
</div>
{:_js('js/swipe.js')}
<script>
    var pointer = $('#pointer').find('a');
    Swipe(document.getElementById('slider'), {
        continuous: true,
        auto: 5000,
        disableScroll: true,
        stopPropagation: true,
        callback: function (index, element) {
            $('#pointer a.active').removeClass('active');
            $(pointer[index]).addClass('active');
        }
    });
</script>
{/block}